<template>
	<view class="pending-activities-page">


		<!-- 用药提醒卡片列表 -->
		<view class="medication-list">
			<view class="medication-card" v-for="(item, index) in medicationList" :key="`pending-${item.id}-${index}`" :class="getCardClass(index)">
				<view class="card-header">
					<text class="card-title">{{ item.title }}</text>
					<view class="status-tag" :class="item.statusClass" v-if="item.statusText">
						<text class="status-text">{{ item.statusText }}</text>
						<view class="status-time">{{ item.statusTime }}</view>
					</view>
				</view>
				
				<view class="card-content">
					<view class="info-row">
						<text class="info-label">老人姓名:</text>
						<text class="info-value">{{ item.patientName }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">活动时间:</text>
						<text class="info-value">{{ item.activityTime }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">活动描述:</text>
						<text class="info-value">{{ item.description }}</text>
					</view>
				</view>
				
				<view class="card-actions">
					<button class="action-btn primary" @tap="confirmMedication(item)">
						{{ item.confirmButtonText || '确认服药' }}
					</button>
					<button class="action-btn secondary" @tap="showUploadModal(item)">上传图文</button>
					<button v-if="item.showPostpone" class="action-btn secondary" @tap="postponeReminder(item)">延后提醒</button>
				</view>
			</view>
		</view>

		<!-- 上传图文弹窗 -->
		<view class="upload-modal" v-if="showUploadModalFlag" @tap="closeUploadModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">上传图文</text>
					<view class="close-btn" @tap="closeUploadModal">
						<text class="close-icon">×</text>
					</view>
				</view>
				
				<view class="modal-body">
					<view class="form-item">
						<text class="form-label">活动名称</text>
						<input class="form-input" v-model="uploadForm.activityName" placeholder="喂药提醒" />
					</view>
					
					<view class="form-item">
						<text class="form-label">完成时间</text>
						<input class="form-input" v-model="uploadForm.completionTime" placeholder="2022-7-23 16:27:35" />
					</view>
					
					<view class="form-item">
						<text class="form-label">完成描述</text>
						<textarea class="form-textarea" v-model="uploadForm.description" placeholder="请输入备注信息" />
					</view>
					
					<view class="form-item">
						<text class="form-label">上传附件</text>
						<view class="attachment-area">
							<view class="attachment-item" v-for="(attachment, index) in uploadForm.attachments" :key="index">
								<image class="attachment-thumb" :src="attachment" mode="aspectFill" />
								<view class="remove-btn" @tap="removeAttachment(index)">
									<text class="remove-icon">×</text>
								</view>
							</view>
							<view class="add-attachment" @tap="addAttachment" v-if="uploadForm.attachments.length < 3">
								<text class="add-icon">+</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="modal-footer">
					<button class="modal-btn cancel" @tap="closeUploadModal">取消</button>
					<button class="modal-btn submit" @tap="submitUpload">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			medicationList: [
				{
					id: 1,
					title: '用药提醒',
					patientName: '王奶奶',
					activityTime: '2022-7-23 16:27:35',
					description: '张奶奶需要服用降压药，需要专人陪护注意老人心态（每日2次，每次1片）',
					statusText: '即将逾期',
					statusTime: '14:30',
					statusClass: 'urgent',
					showPostpone: true,
					confirmButtonText: '确认服药'
				},
				{
					id: 2,
					title: '用药提醒',
					patientName: '王奶奶',
					activityTime: '2022-7-23 16:27:35',
					description: '张奶奶需要服用降压药，需要专人陪护注意老人心态（每日2次，每次1片）',
					statusText: '延后提醒',
					statusTime: '14:30',
					statusClass: 'postponed',
					showPostpone: false,
					confirmButtonText: '确认服药'
				},
				{
					id: 3,
					title: '用药提醒',
					patientName: '王奶奶',
					activityTime: '2022-7-23 16:27:35',
					description: '张奶奶需要服用降压药，需要专人陪护注意老人心态（每日2次，每次1片）',
					statusText: '',
					statusTime: '',
					statusClass: '',
					showPostpone: true,
					confirmButtonText: '确认服药'
				}
			],
			showUploadModalFlag: false,
			uploadForm: {
				activityName: '',
				completionTime: '',
				description: '',
				attachments: []
			}
		}
	},
	onLoad() {
		// 页面加载时的初始化
		uni.setNavigationBarTitle({
			title: '待办活动'
		});
	},
	methods: {
		// 获取卡片样式类名
		getCardClass(index) {
			const classes = ['card-bg-1', 'card-bg-2', 'card-bg-3'];
			return classes[index % classes.length];
		},

		// 确认服药
		confirmMedication(item) {
			uni.showModal({
				title: '确认服药',
				content: `确认${item.patientName}已服药？`,
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: `已确认${item.patientName}服药`,
							icon: 'success'
						});
						// 这里可以更新数据状态
					}
				}
			});
		},
		
		// 显示上传图文弹窗
		showUploadModal(item) {
			this.uploadForm = {
				activityName: '喂药提醒',
				completionTime: item.activityTime,
				description: '',
				attachments: []
			};
			this.showUploadModalFlag = true;
		},
		
		// 关闭上传图文弹窗
		closeUploadModal() {
			this.showUploadModalFlag = false;
		},
		
		// 添加附件
		addAttachment() {
			uni.chooseImage({
				count: 3 - this.uploadForm.attachments.length,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.uploadForm.attachments = this.uploadForm.attachments.concat(res.tempFilePaths);
				}
			});
		},
		
		// 移除附件
		removeAttachment(index) {
			this.uploadForm.attachments.splice(index, 1);
		},
		
		// 提交上传
		submitUpload() {
			if (!this.uploadForm.activityName.trim()) {
				uni.showToast({
					title: '请输入活动名称',
					icon: 'none'
				});
				return;
			}
			
			uni.showToast({
				title: '上传成功',
				icon: 'success'
			});
			
			this.uploadForm = {
				activityName: '',
				completionTime: '',
				description: '',
				attachments: []
			};
			this.closeUploadModal();
		},
		
		// 延后提醒
		postponeReminder(item) {
			uni.showActionSheet({
				itemList: ['延后30分钟', '延后1小时', '延后2小时'],
				success: (res) => {
					const delayTimes = ['30分钟', '1小时', '2小时'];
					uni.showToast({
						title: `已延后${delayTimes[res.tapIndex]}`,
						icon: 'success'
					});
					// 这里可以更新提醒时间
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.pending-activities-page {
	min-height: 100vh;
	background: #F8F8F8;
}

.page-header {
	background: linear-gradient(135deg, #FF4856 0%, #FF6F1C 100%);
	padding: 60rpx 30rpx 40rpx;
	text-align: center;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #FFFFFF;
}

.medication-list {
	padding: 30rpx 20rpx;
	background: #F8F8F8;
}

.medication-card {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	margin: 0 auto 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	position: relative;
	overflow: hidden;
	max-width: 700rpx;
}

.medication-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

.medication-card.card-bg-1::before {
	background: linear-gradient(180deg, rgba(255, 72, 86, 0.15) 0%, rgba(255, 72, 86, 0.05) 50%, rgba(255, 72, 86, 0.02) 100%);
}

.medication-card.card-bg-2::before {
	background: linear-gradient(0deg, rgba(0, 198, 191, 0.08) 0%, rgba(0, 198, 132, 0.08) 100%);
}

.medication-card.card-bg-3::before {
	background: #FFFFFF;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24rpx;
}

.card-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.status-tag {
	display: flex;
	align-items: center;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
}

.status-tag.urgent {
	background: #FFF2E6;
	border: 1rpx solid #FF7D00;
}

.status-tag.postponed {
	background: #E8F5E8;
	border: 1rpx solid #4CAF50;
}

.status-text {
	font-size: 24rpx;
	margin-right: 8rpx;
}

.status-tag.urgent .status-text {
	color: #FF7D00;
}

.status-tag.postponed .status-text {
	color: #4CAF50;
}

.status-time {
	font-size: 24rpx;
	font-weight: bold;
	color: #FFFFFF;
	background: #FF7D00;
	padding: 4rpx 12rpx;
	border-radius: 8rpx;
}

.status-tag.postponed .status-time {
	background: #4CAF50;
}

.card-content {
	margin-bottom: 24rpx;
}

.info-row {
	display: flex;
	margin-bottom: 16rpx;
	align-items: flex-start;
}

.info-label {
	font-size: 28rpx;
	color: #666666;
	min-width: 140rpx;
	margin-right: 16rpx;
}

.info-value {
	font-size: 28rpx;
	color: #333333;
	flex: 1;
	line-height: 1.5;
}

.card-actions {
	display: flex;
	gap: 16rpx;
	justify-content: flex-start;
}

.action-btn {
	height: 60rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
	border: none;
	transition: all 0.2s ease;
	flex: 1;
	max-width: 160rpx;
}

.action-btn.primary {
	background: #FF7D00;
	color: #FFFFFF;
}

.action-btn.primary:active {
	background: #E66A00;
	transform: scale(0.98);
}

.action-btn.secondary {
	background: #FFFFFF;
	color: #999999;
	border: 1rpx solid #E0E0E0;
}

.action-btn.secondary:active {
	background: #F5F5F5;
	transform: scale(0.98);
}

/* 上传图文弹窗样式 */
.upload-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 1000;
	animation: fadeIn 0.3s ease-out;
	padding-bottom: env(safe-area-inset-bottom);
}

.modal-content {
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0 0;
	width: 100%;
	max-height: 85vh;
	box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.15);
	position: relative;
	overflow: hidden;
	animation: slideUp 0.3s ease-out;
	display: flex;
	flex-direction: column;
	margin-bottom: env(safe-area-inset-bottom);
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideUp {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 50rpx 40rpx 30rpx;
	border-bottom: 1rpx solid #E0E0E0;
}

.modal-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333333;
}

.close-btn {
	width: 70rpx;
	height: 70rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.close-icon {
	font-size: 56rpx;
	color: #999999;
}

.modal-body {
	padding: 40rpx;
	flex: 1;
	overflow-y: auto;
	max-height: calc(85vh - 200rpx);
}

.form-item {
	margin-bottom: 40rpx;
}

.form-label {
	font-size: 30rpx;
	color: #666666;
	margin-bottom: 20rpx;
	display: block;
}

.form-input, .form-textarea {
	width: 100%;
	height: 90rpx;
	border: 1rpx solid #E0E0E0;
	border-radius: 12rpx;
	padding: 0 24rpx;
	font-size: 30rpx;
	color: #333333;
	line-height: 1.5;
	box-sizing: border-box;
	background: #FFFFFF;
}

.form-textarea {
	padding: 24rpx;
	min-height: 140rpx;
	height: auto;
	resize: none;
}

.attachment-area {
	display: flex;
	flex-wrap: wrap;
	gap: 24rpx;
	margin-top: 24rpx;
}

.attachment-item {
	position: relative;
	width: 140rpx;
	height: 140rpx;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.attachment-thumb {
	width: 100%;
	height: 100%;
}

.remove-btn {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	width: 44rpx;
	height: 44rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.remove-icon {
	color: #FFFFFF;
	font-size: 26rpx;
	font-weight: bold;
}

.add-attachment {
	width: 140rpx;
	height: 140rpx;
	border: 2rpx dashed #E0E0E0;
	border-radius: 12rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #F8F8F8;
}

.add-icon {
	color: #999999;
	font-size: 56rpx;
	font-weight: bold;
}

.modal-footer {
	display: flex;
	justify-content: space-between;
	padding: 40rpx;
	border-top: 1rpx solid #E0E0E0;
	background: #FFFFFF;
	flex-shrink: 0;
}

.modal-btn {
	width: 45%;
	height: 90rpx;
	border-radius: 45rpx;
	font-size: 34rpx;
	border: none;
	transition: all 0.2s ease;
	min-height: 90rpx;
}

.modal-btn.cancel {
	background: #F5F5F5;
	color: #666666;
	border: 1rpx solid #E0E0E0;
}

.modal-btn.submit {
	background: linear-gradient(135deg, #FF7D00 0%, #FF4856 100%);
	color: #FFFFFF;
}

.modal-btn.cancel:active {
	background: #D0D0D0;
	transform: scale(0.98);
}

.modal-btn.submit:active {
	background: #E66A00;
	transform: scale(0.98);
}
</style> 